<template>
  <div>
    <!-- 搜索部分 -->
    <el-row>
  <el-col :span="18" :offset="4">
    <!-- 搜索部分 -->
    <el-form :inline="true"  class="demo-form-inline">
  <el-form-item label="核心企业">
    <el-input  placeholder="请输入企业名称" v-model="fname"></el-input>
  </el-form-item>
  <el-form-item label="融资企业">
    <el-input  placeholder="请输入企业名称" v-model="ename"></el-input>
  </el-form-item>
  <el-form-item label="状态">
          <el-select v-model="recordType" style="width:100px;" class="m-2" placeholder="状态">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="dofind()">查询</el-button>
  </el-form-item>
</el-form>
  </el-col>
</el-row>
<!-- 数据部分 -->
<el-row>
  <el-col :span="24">
    <el-table
    :data="tableData"
    stripe
    border
    style="width: 100%">
    <!-- 复选框 -->
    <el-table-column
      type="index"
      width="50"
      align="center"
      label="序号">
    </el-table-column>
    <el-table-column
      prop="coreName"
      label="融资企业">
    </el-table-column>
    <el-table-column
      prop="financeName"
      label="核心企业">
    </el-table-column>
    <el-table-column
      prop="recordAmount"
      label="还款金额">
    </el-table-column>
    <el-table-column
      prop="recordTime"
      label="还款时间">
    </el-table-column>
    <el-table-column
      label="还款类型">
      <template slot-scope="scope">
         {{ scope.row.recordType == 1 ? "正常还款" : "代偿还款" }}
            </template>
    </el-table-column>
    
    </el-table>
  </el-col>
</el-row>

<!-- 分页部分 -->
<el-row>
  <el-col :span="24">
    <el-pagination
    background
    :page-sizes="[1, 2, 3, 4]"
    :page-size="pageSize"
    :current-page="pageNumber"
    layout="total, sizes,prev, pager, next"
    @prev-click="prevPage"
    @next-click="nextPage"
    @size-change="sizeChange"
    @current-change="currentChange"
    :total="total">
  </el-pagination>
  </el-col>
</el-row>
  </div>
</template>

<script>
export default {
  data(){
    return{
      status:[
        {
          value:'',
          label:''
        },
        {
          value:1,
          label:'正常还款'
        },
        {
          value:2,
          label:'代偿还款'
        }
      ],
      recordType:'',
      pageSize:2,
      pageNumber:1,
      total:0,
      tableData:[],
      fname:'',
      ename:'',
    }
  },
  methods:{
    queryList(){
      let param={};
      param.pageNum = this.pageNumber;
      param.pageSize = this.pageSize;
      let data = {};
      data.finaceName = this.fname;
      data.coreName = this.ename;
      data.recordType = this.recordType;
      param.data = data;
      this.$axios.post('api/finance/records/findAllRecords',param,{headers:{'jwt':localStorage.getItem('jwt')}})
      .then(res =>{
        console.log(res.data)
        let pageData = res.data.data;
        this.tableData = pageData.list;
        this.pageNumber = pageData.pageNum;
        this.pageSize = pageData.pageSize;
        this.total = pageData.total;
        console.log(this.tableData)
      })

    },
  

    dofind(){
      this.queryList()
    },
    prevPage(val){
            this.pageNumber = val
            this.queryList()
        },
        nextPage(val){
            this.pageNumber = val
            this.queryList()
        },
        sizeChange(val){
            this.pageSize = val
             this.pageNumber = 1;
             this.queryList()
        },
        currentChange(val){
            this.pageNumber = val
            this.queryList()
        },
  },
  created(){
    this.queryList()
  }
}
</script>

<style>

</style>